<template>
	<div>
		<h3 style="margin-bottom: 20px;">入住信息查询</h3>
		<el-row :gutter="20" type="flex" justify="start" align="middle">
		    <el-col :span="2">
				姓名：
			</el-col>
			<el-col :span="4">
				<el-input
				    v-model="name"
				    class="w-50 m-2"
				    placeholder="输入客户姓名"
				    :prefix-icon="User"
				/>
			</el-col>
		    <el-col :span="2">
				类型：
			</el-col>
			<el-col :span="4">
				    <el-select
				        v-model="type"
				        placeholder="输入客户类型"
				        clearable
				    >
				        <el-option label="自理老人" value="自理老人" />
				        <el-option label="护理老人" value="护理老人" />
				    </el-select>
			</el-col>
		    <el-col :span="4">
				<el-button @click="getPage()">查询</el-button>
			</el-col>
		    <el-col :span="4">
				<el-button type="primary" @click="showAddUser()">增加用户</el-button>
			</el-col>
			<el-col :span="4">
				<el-button type="danger" @click="delUserMany()">批量删除</el-button>
			</el-col>
		</el-row>
		<el-dialog v-model="dialogFormVisible" title="增加用户">
		    <el-form :model="userForm">
			  <el-row :gutter="22">
			      <el-col :span="12">
					  <el-form-item label="编号">
					    <el-input v-model="userForm.id" autocomplete="off" />
					  </el-form-item>
				  </el-col>
			      <el-col :span="12">
					  <el-form-item label="姓名">
					    <el-input v-model="userForm.name" autocomplete="off" clearable/>
					  </el-form-item>
				  </el-col>
			  </el-row>
			  <el-row :gutter="22">
			      <el-col :span="12">
					  <el-form-item label="类型">
					        <el-select
					          v-model="userForm.type"
					        >
					          <el-option label="自理老人" value="自理老人" />
					          <el-option label="护理老人" value="护理老人" />
					        </el-select>
					  </el-form-item>
				  </el-col>
				  <el-col :span="12">
					  <el-form-item label="年龄">
					    <el-input v-model="userForm.age" autocomplete="off" />
					  </el-form-item>
				  </el-col>
			  </el-row>
			  <el-row :gutter="22">
				  <el-col :span="12">
					  <el-form-item label="性别">
					        <el-select
					          v-model="userForm.gender"
					        >
					          <el-option label="男" value="男" />
					          <el-option label="女" value="女" />
					        </el-select>
					  </el-form-item>
				  </el-col>
				  <el-col :span="12">
					  <el-form-item label="身份证号">
					    <el-input v-model="userForm.certificate" autocomplete="off" />
					  </el-form-item>
				  </el-col>
			  </el-row>
			  <el-row :gutter="22">
				  <el-col :span="12">
					  <el-form-item label="血型">
					    <el-input v-model="userForm.blood" autocomplete="off" />
					  </el-form-item>
				  </el-col>
				  <el-col :span="12">
					  <el-form-item label="家属">
					    <el-input v-model="userForm.family" autocomplete="off" />
					  </el-form-item>
				  </el-col>
			  </el-row>
			  <el-row :gutter="22">
			  	  <el-col :span="12">
					  <el-form-item label="电话">
					    <el-input v-model="userForm.tel" autocomplete="off" />
					  </el-form-item>
			  	  </el-col>
			  	  <el-col :span="12">
					  <el-form-item label="楼栋">
					    <el-input v-model="userForm.building" autocomplete="off" :disabled="true" />
					  </el-form-item>
			  	  </el-col>
			  </el-row>
			  <el-row :gutter="22">
			  	  <el-col :span="12">
					  <el-form-item label="房间号" >
					    <el-select v-model="userForm.roomnum" @change="handleRoomChange">
					    <el-option v-for="item in roomnumSet" :label="item" :value="item" />
					    </el-select>
					  </el-form-item>
			  	  </el-col>
			  	  <el-col :span="12">
					  <el-form-item label="床位号" >
					    <el-select v-model="userForm.bednum">
					    <el-option v-for="item in filteredBeds" :label="item.bedid" :value="item.bedid" />
					    </el-select>
					  </el-form-item>
			  	  </el-col>
			  </el-row>
			  <el-row :gutter="22">
			  	  <el-col :span="12">
					  <el-form-item label="入住时间" >
					    <el-date-picker
					        v-model="userForm.checkintime"
					        type="date"
					        value-format="YYYY-MM-DD"
					    />
					  </el-form-item>
			  	  </el-col>
			  	  <el-col :span="12">
					  <el-form-item label="到期时间" >
					    <el-date-picker
					        v-model="userForm.exptime"
					        type="date"
					        value-format="YYYY-MM-DD"
					    />
					  </el-form-item>
			  	  </el-col>
			  </el-row>
			  <el-row :gutter="22">
			  	  <el-col :span="12">
					  <el-form-item label="基础疾病">
					    <el-input v-model="userForm.disease" autocomplete="off" />
					  </el-form-item>
			  	  </el-col>
			  	  <el-col :span="12">
					  <el-form-item label="状态">
					        <el-select
					          v-model="userForm.state"
							  :disabled="true"
					        >
					          <el-option label="正常" value="正常" />
					          <el-option label="退住" value="退住" />
					        </el-select>
					  </el-form-item>
			  	  </el-col>
			  </el-row>
		    </el-form>
		    <template #footer>
		      <span class="dialog-footer">
		        <el-button @click="dialogFormVisible = false">取消</el-button>
		        <el-button type="primary" @click="addUser">
		          确定
		        </el-button>
		      </span>
		    </template>
		</el-dialog>
		<el-dialog v-model="dialogFormVisible02" title="修改用户">
		    <el-form :model="userForm02">
		      <el-row :gutter="22">
		          <el-col :span="12">
		    		  <el-form-item label="编号">
		    		    <el-input v-model="userForm02.id" autocomplete="off" />
		    		  </el-form-item>
		    	  </el-col>
		          <el-col :span="12">
		    		  <el-form-item label="姓名">
		    		    <el-input v-model="userForm02.name" autocomplete="off" clearable/>
		    		  </el-form-item>
		    	  </el-col>
		      </el-row>
		      <el-row :gutter="22">
		          <el-col :span="12">
		    		  <el-form-item label="类型">
		    		        <el-select
		    		          v-model="userForm02.type"
		    		        >
		    		          <el-option label="自理老人" value="自理老人" />
		    		          <el-option label="护理老人" value="护理老人" />
		    		        </el-select>
		    		  </el-form-item>
		    	  </el-col>
		    	  <el-col :span="12">
		    		  <el-form-item label="年龄">
		    		    <el-input v-model="userForm02.age" autocomplete="off" />
		    		  </el-form-item>
		    	  </el-col>
		      </el-row>
		      <el-row :gutter="22">
		    	  <el-col :span="12">
		    		  <el-form-item label="性别">
		    		        <el-select
		    		          v-model="userForm02.gender"
		    		        >
		    		          <el-option label="男" value="男" />
		    		          <el-option label="女" value="女" />
		    		        </el-select>
		    		  </el-form-item>
		    	  </el-col>
		    	  <el-col :span="12">
		    		  <el-form-item label="身份证号">
		    		    <el-input v-model="userForm02.certificate" autocomplete="off" />
		    		  </el-form-item>
		    	  </el-col>
		      </el-row>
		      <el-row :gutter="22">
		    	  <el-col :span="12">
		    		  <el-form-item label="血型">
		    		    <el-input v-model="userForm02.blood" autocomplete="off" />
		    		  </el-form-item>
		    	  </el-col>
		    	  <el-col :span="12">
		    		  <el-form-item label="家属">
		    		    <el-input v-model="userForm02.family" autocomplete="off" />
		    		  </el-form-item>
		    	  </el-col>
		      </el-row>
		      <el-row :gutter="22">
		      	  <el-col :span="12">
		    		  <el-form-item label="电话">
		    		    <el-input v-model="userForm02.tel" autocomplete="off" />
		    		  </el-form-item>
		      	  </el-col>
		      	  <el-col :span="12">
		    		  <el-form-item label="楼栋">
		    		    <el-input v-model="userForm02.building" autocomplete="off" :disabled="true" />
		    		  </el-form-item>
		      	  </el-col>
		      </el-row>
		      <el-row :gutter="22">
		      	  <el-col :span="12">
		    		  <el-form-item label="房间号">
		    		    <el-select v-model="userForm02.roomnum" @change="handleRoomChange" :disabled="true">
		    		    <el-option v-for="item in roomFreeAll" :label="item.roomnum" :value="item.roomnum" />
		    		    </el-select>
		    		  </el-form-item>
		      	  </el-col>
		      	  <el-col :span="12">
		    		  <el-form-item label="床位号">
		    		    <el-select v-model="userForm02.bednum" :disabled="true">
		    		    <el-option v-for="item in filteredBeds" :label="item.bedid" :value="item.bedid" />
		    		    </el-select>
		    		  </el-form-item>
		      	  </el-col>
		      </el-row>
		      <el-row :gutter="22">
		      	  <el-col :span="12">
		    		  <el-form-item label="入住时间" :disabled="true">
		    		    <el-date-picker
		    		        v-model="userForm02.checkintime"
		    		        type="date"
		    		        value-format="YYYY-MM-DD"
		    		    />
		    		  </el-form-item>
		      	  </el-col>
		      	  <el-col :span="12">
		    		  <el-form-item label="到期时间" >
		    		    <el-date-picker
		    		        v-model="userForm02.exptime"
		    		        type="date"
		    		        value-format="YYYY-MM-DD"
		    		    />
		    		  </el-form-item>
		      	  </el-col>
		      </el-row>
		      <el-row :gutter="22">
		      	  <el-col :span="12">
		    		  <el-form-item label="基础疾病">
		    		    <el-input v-model="userForm02.disease" autocomplete="off" />
		    		  </el-form-item>
		      	  </el-col>
		      	  <el-col :span="12">
					  <el-form-item label="状态">
					        <el-select
					          v-model="userForm.state"
					        >
					          <el-option label="正常" value="正常" />
					          <el-option label="退住" value="退住" />
					        </el-select>
					  </el-form-item>
		      	  </el-col>
		      </el-row>
		    </el-form>
		    <template #footer>
		      <span class="dialog-footer">
		        <el-button @click="dialogFormVisible02 = false">取消</el-button>
		        <el-button type="primary" @click="updateUser">
		          确定
		        </el-button>
		      </span>
		    </template>
		</el-dialog>
		<hr>
		<!-- 复选框 -->
		<el-table :data="pageInfo.tableData" style="width: 100%" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" />
			<el-table-column prop="id" label="编号"/>
		    <el-table-column prop="name" label="姓名"/>
		    <el-table-column prop="age" label="年龄"/>
		    <el-table-column prop="gender" label="性别" />
			<el-table-column prop="blood" label="血型" />
			<el-table-column prop="family" label="家属" />
			<el-table-column prop="tel" label="电话" />
			<el-table-column prop="roomnum" label="房间号" />
			<el-table-column prop="bednum" label="床位号" />
			<el-table-column prop="checkintime" label="入住时间" />
			<el-table-column prop="exptime" label="到期时间" />
			<el-table-column prop="disease" label="基础疾病" />
			<el-table-column prop="state" label="状态" />
			<el-table-column label="操作" width="120">
			    <template #default="scope">
			        <el-button link type="primary" size="small" @click="delUser(scope.row)"
			          >删除</el-button
			        >
			        <el-button link type="primary" size="small" @click="showUpdateUser(scope.row)">修改</el-button>
			    </template>
			</el-table-column>
		</el-table>
		<hr>
		<el-pagination
		    v-model:current-page="pageInfo.currentPage4"
		    v-model:page-size="pageInfo.pageSize4"
		    :page-sizes="[2, 3, 5, 7]"
		    :small="pageInfo.small"
		    :disabled="pageInfo.disabled"
		    :background="pageInfo.background"
		    layout="total, sizes, prev, pager, next, jumper"
		    :total="pageInfo.total"
		    @size-change="handleSizeChange"
		    @current-change="handleCurrentChange"
		/>
	</div>
</template>

<script setup>
// 需要在控制台输npm install axios --save加载axios
import axios from 'axios'
import { onMounted,reactive,ref,watch  } from 'vue';
import { ElMessage,ElMessageBox } from 'element-plus';
import { Calendar, Search } from '@element-plus/icons-vue'
//如果不用下面axios.default的路径，就配置utils目录，然后引用
import { getCustomerPage,delUserManyAxios,queryFreeRoom,addUserAxios,delUserAxios,updateUserAxios } from "@/utils/requests/search.js"

//多条件分页查询
const name = ref("");
const type=ref("");
const pageInfo = reactive({
	tableData:[],
	small:true,
	background:true,
	total:0,
	disabled:false,
	currentPage4:1,
	pageSize4:3
});
const getPage = ()=>{
	getCustomerPage(pageInfo,name.value,type.value)
            .then((res)=>{
                pageInfo.tableData=res.data.records;
				pageInfo.total = res.data.total;
                console.log(pageInfo.tableData);
                
            })
            .catch((error)=>{
                console.log(error);
            })	
    
}
const handleSizeChange = (nowSize) => {
  pageInfo.pageSize4=nowSize;
  getPage();
};
const handleCurrentChange = (currentPage) => {
  pageInfo.currentPage4=currentPage;
  getPage();
};

//批量删除
const selectedUser = reactive([]);
const handleSelectionChange = (val)=>{
	selectedUser.length = 0;
	for(let i=0;i<val.length;i++){
		selectedUser[i] = val[i];
	}
}
const delUserMany = ()=>{
	ElMessageBox.confirm(
	    '是否要删除'+selectedUser.length+'条记录:',
	    'Warning',
	    {
	      confirmButtonText: '确认',
	      cancelButtonText: '取消',
	      type: 'warning',
	    }
	  ).then(() => {
		  // let ids = [];
		  // for(let i=0;i<selectedUser.length;i++){
		  // 	ids.push(selectedUser[i].id);
		  // }
		  delUserManyAxios(selectedUser).then((res)=>{
		  	if(res.data>0){
		  		ElMessage.success("成功删除"+res.data+"条记录")
		  	}else{
		  		ElMessage.warning("删除失败")
		  	}
		  	getPage();
		  })
		})
		.catch(() => {
		  ElMessage({
		    type: 'info',
		    message: '取消删除',
		  })
		})
}

//单个删除
const delUser = (row)=>{
	ElMessageBox.confirm(
	    '是否要删除客户:'+row.name,
	    'Warning',
	    {
	      confirmButtonText: '确认',
	      cancelButtonText: '取消',
	      type: 'warning',
	    }
	  ).then(() => {
		delUserAxios(row.id,row.bednum,row.state).then((res)=>{
			if(res.data == "1" ||res.data ==1){
				ElMessage.success("编号："+row.id+"客户成功删除");
			}else{
				ElMessage.success({type:'info',message:'删除未成功，请检查重试！'});
			}
			getPage();
		})
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

//新增客户
const dialogFormVisible = ref(false)
const userForm = reactive({
	id:'',
	type:'自理老人',
	name:'',
	age:'',
	gender:'男',
	certificate:'',
	blood:'O型',
	family:'',
	tel:'',
	building:606,
	roomnum:'',
	bednum:'',
	checkintime:'',
	exptime:'',
	disease:'',
	state:'正常'
})

const roomFreeAll = ref({
	bedid:'',
	roomnum:'',
	state:''
})
const roomFreeAll01 = []
const roomnumSet = new Set();  // 创建一个 Set 来存储唯一的 roomnum
const showAddUser = ()=>{
	queryFreeRoom().then((res)=>{
		console.log(res);
		roomFreeAll.value = res.data;
		
		// 遍历 roomFreeAll 中的数据
		for (let i = 0; i < roomFreeAll.value.length; i++) {
		    const room = roomFreeAll.value[i];
		    if (!roomnumSet.has(room.roomnum)) {
		    roomnumSet.add(room.roomnum);  // 将新的 roomnum 加入 Set
		    }
		}
		console.log(roomnumSet);
		roomFreeAll01.length = 0; // 清空数组（如果需要）
		roomFreeAll01.push(...res.data); // 使用 push 方法将数据添加到数组中
		console.log(roomFreeAll01);
	});
	dialogFormVisible.value = true
}
const filteredBeds = ref([]); // 用于存储当前房间号下的床位号
const handleRoomChange = () => {
  // 根据选择的房间号，过滤出相应的床位号
  filteredBeds.value = roomFreeAll01.filter(item => item.roomnum === userForm.roomnum)
								  .map(item => item.bedid);
  // 清空床位号选择，以便用户重新选择
  userForm.bednum = '';
};
watch(
  () => userForm.roomnum,
  (newRoomnum) => {
    if (newRoomnum) {
      filteredBeds.value = roomFreeAll01.filter(item => item.roomnum === newRoomnum);
      userForm.bednum = ''; // 清空之前选中的床位号
    } else {
      filteredBeds.value = [];
    }
  }
);
const addUser = ()=>{
	addUserAxios(userForm).then((res)=>{
		let num = res.data;
		if(num == "1" || num == 1){
			ElMessage({
			    showClose: true,
			    message: '添加成功',
			    type: 'success',
			  })
			getPage();
		}else{
			ElMessage({
			    showClose: true,
			    message: '添加失败',
			    type: 'error',
			})
		}
	});
	dialogFormVisible.value = false;
}

//修改
const dialogFormVisible02 = ref(false)
const userForm02 = reactive({
	id:'',
	type:'',
	name:'',
	age:'',
	gender:'',
	certificate:'',
	blood:'',
	family:'',
	tel:'',
	building:606,
	roomnum:'',
	bednum:'',
	checkintime:'',
	exptime:'',
	disease:'',
	state:''
})
const showUpdateUser = (row) =>{
	// queryFreeRoom().then((res)=>{
	// 	deptAll.value = res.data;
	// });
	userForm02.id = row.id;
	userForm02.type = row.type;
	userForm02.name = row.name;
	userForm02.age = row.age;
	userForm02.gender = row.gender;
	userForm02.certificate = row.certificate;
	userForm02.blood = row.blood;
	userForm02.family = row.family;
	userForm02.tel = row.tel;
	userForm02.building = row.building;
	userForm02.roomnum = row.roomnum;
	userForm02.bednum = row.bednum;
	userForm02.checkintime = row.checkintime;
	userForm02.exptime = row.exptime;
	userForm02.disease = row.disease;
	userForm02.state = row.state;
	dialogFormVisible02.value = true;
}
const updateUser = ()=>{
	updateUserAxios(userForm02).then((res)=>{
		let num = res.data;
		if(num == "1" || num == 1){
			ElMessage({
			    showClose: true,
			    message: '修改成功',
			    type: 'success',
			  })
			getPage();
		}else{
			ElMessage({
			    showClose: true,
			    message: '修改失败',
			    type: 'error',
			})
		}
	});
	dialogFormVisible02.value = false;
}

onMounted(()=>{
	getPage();
})
</script>

<style>
</style>